<template>
    <div id="search-panel">
      <div class="infrasType">
        <span>{{curInfrastType}}</span>
        <i :class="[isPopShow?'up':'down','tog-icon']" @click="setPopShow()"></i>
        <ul v-if="isPopShow">
          <li  @click="setId(allType)" class="{active:allType.type===curInfrastType}" @mouseenter="hideSecondPop(allType)">全部类别</li> <!--@mouseenter="showSecondPop(infrast)-->
          <li v-for="infrast in infrastructureList" :key="infrast.typeid" :class="{active:infrast.type===curInfrastType}" @click="setFrastType(infrast)" v-on:mouseover="showSecondPop(infrast)" >{{infrast.type}}
          </li>
        </ul>
        <!--<EasyScrollbar :barOption="listBar">-->
          <ul class="secondPop"  v-if="isTwoPop"  v-bind:style="[{height:secondheight+'px'},{marginTop:secondMarginTop+'px'}]">
            <li v-if="infraSearchList.length > 0" v-for="(infrastSearch,key) in infraSearchList" :key="key" :title="infrastSearch.name" @click="selectCom(infrastSearch)">{{infrastSearch.name}}</li>
            <li v-if="infraSearchList.length === 0">暂无数据</li>
          </ul>
        <!--</EasyScrollbar>-->
      </div>
      <div class="searchInput">
        <input type="text" v-model="inputText" :placeholder="defaultText">
        <i class="search-icon s-icon" @click="getSearchResult()" v-if="!inputText"></i>
        <i class="search-icon c-icon" @click="clearInputText()" v-if="inputText"></i>
        <SearchInfrastResult v-if="isPanelShow" :searchList="infraSearchList" @clickInfra="getInfraInfor"></SearchInfrastResult>

      </div>

    </div>

</template>

<script>
  import {mapGetters,mapMutations} from 'vuex';
  import SearchInfrastResult from "./searchInfrastResult";
  import MYCONF from '../../myconf';
  import evenbus from '../../util/event-bus';
  import env from '../../util/env'
    export default {
        name: 'SearchPanel',
      components: {SearchInfrastResult},
      data () {
            return {
              secondheight:'',
              secondMarginTop:'',
              secondStyle:{},
              curInfrastType:'全部类型',
              allType:{typeid:0,type:'全部类别'},
              /*isPopShow:false,  //类别下拉框*/
              /*isTwoPop:false,  //二级菜单*/
              defaultText: '搜索基础设施名称',
              inputText:'',
              infraSearchList:[],
              isPanelShow:false, //搜索列表是否显示
              isclickSecond:false//选择二级菜单中某一项时，搜索列表隐藏

            }
        },
      props:{
        infrastructureList:{  //基础设施分类列表
          type: Array
        },
      },
        mounted(){

        },
      watch:{
        inputText: function (newVal,oldVal) {
          if(newVal!==oldVal){
            if(newVal !== ''){
              //this.isPopShow = false;
              if(this.isclickSecond){  //如果是二级菜单选中出得具体公司，不显示搜索框
                this.isPanelShow = false;
                this.isclickSecond = false;
              }else{
                this.isPanelShow = true;
              }
              this.updateIsPopShow(false);
              this.getSearchList();
            }else{
              this.infraSearchList = [];
              this.isPanelShow = false;
              this.updateInType(this.in_type);
              this.getSearchList();
            }
          }
        },
        isPopShow : function (newVal) {
          if(newVal){
            this.inputText = '';
            env.popups.map((item) => {
              item.remove();
            })
          }
        },
        infraSearchList:function () {
          if(this.infraSearchList.length>0 && this.infraSearchList.length<10){
            this.secondheight = this.infraSearchList.length * 44;
          }
          if(this.infraSearchList.length>10){
            this.secondheight = 445;
          }
          if(this.infraSearchList.length==0){
            this.secondheight = 44;
          }
        },
      },
      computed:{
        ...mapGetters(['in_type','isPopShow','cur_nav','isTwoPop']),
      },
      comments:{
          SearchInfrastResult
      },
      methods:{
        ...mapMutations(['updateInType','updateIsPopShow','updateIsNavShow','updateIsTwoPop']),
        setPopShow(){
          //this.isPopShow = !this.isPopShow;
          this.updateIsPopShow(!this.isPopShow);
          if(this.cur_nav != 0){
            this.updateIsNavShow(false)
          }
        },
        setFrastType(frast){
          this.curInfrastType = frast.type;
          //this.isPopShow = false;
          this.updateIsPopShow(false);
         // this.isTwoPop = false;
          this.updateIsTwoPop(false);
          this.updateInType(frast);
          this.inputText = '';

        },
        getSearchList :function () {  //获取基础设施搜索结果列表
          let pointList = [];
          let itemPoint = {};
          let url = MYCONF.service.infrastSearchAddress+'type='+this.in_type.typeid+'&input='+this.inputText;
          this.$http.get(url).then(
            response => {
              response = response.body;
              this.infraSearchList = [];
              this.infraSearchList = response.companyInfoList;
              this.infraSearchList.map((item,index)=>{
                pointList.push([item.lon,item.lat])
              })
              if(this.infraSearchList.length ==1 ){
                itemPoint = this.infraSearchList[0];
              }
             evenbus.$emit("filterPoint", pointList,itemPoint);
            },response => {
              // error callback
            }
            );
        },
        setId :function (allType) {   //设置全部类型  typeid  为0
          this.curInfrastType = allType.type;
          //this.isPopShow = false;
          this.updateIsPopShow(false);
          this.updateInType(allType);
        },
        getInfraInfor :function (data) {   //子组件搜索了具体某家的基础设施  获取子组件传的值
            this.inputText = data.info.name;
          evenbus.$emit("locateToCityMap",data.info);
          let _this = this;
           setTimeout(() => {
              _this.isPanelShow = false;
            },200)
        },
        getSearchResult :function () {  //点击搜索按钮  暂无操作

        },
        clearInputText :function () {
          this.inputText = '';
          this.infraSearchList = [];
          this.isPanelShow = false;
          this.getSearchList();
        },
        showSecondPop: function (frast) {
          this.curInfrastType = frast.type;
          this.updateInType(frast);
          //this.isTwoPop = true;
          this.updateIsTwoPop(true);
          this.getSearchList();
          if(frast.typeid<8){
            this.secondMarginTop = -680 + 44*frast.typeid;
          }else{
            this.secondMarginTop = -680 + 44*7;
          }
        },
        hideSecondPop: function (frast) {
          //this.isTwoPop = false;
          this.updateIsTwoPop(false);
          this.curInfrastType = frast.type;
          this.updateInType(frast);
          this.getSearchList();
        },
        selectCom: function (infrastSearch) {
          evenbus.$emit("locateToCityMap",infrastSearch);
          //this.isTwoPop = false;
          this.updateIsTwoPop(false);
         // this.isPopShow = false;
          this.updateIsPopShow(false);
          this.inputText = infrastSearch.name;
          this.infraSearchList = [];
          this.isclickSecond = true;
        }
      }
    }
</script>

<style lang="scss" scoped>
  @import "../../../static/common/common.scss";
  input::-webkit-input-placeholder {
    color: #ececec;
  }

  input::-moz-placeholder { /* Mozilla Firefox 19+ */
    color: #ececec;
  }

  input:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    color: #ececec;
  }

  input:-ms-input-placeholder { /* Internet Explorer 10-11 */
    color: #ececec;
  }

    #search-panel {
      position: absolute;
      top: 0;
      right: 0;
      min-width: 460px;
      height: 40px;
      pointer-events: auto;

      & > div{
        display: inline-block;
        vertical-align: middle;
        padding: 0 2px;
        height: 100%;
        width: 220px;
        @include borderBlur;
        line-height: 38px;
        font-size: $font-mid;

        .tog-icon{
          display: inline-block;
          vertical-align: middle;
          width: 20px;
          height: 30px;
          background: url("../../../static/images/index/tog-down.png") no-repeat center;
          background-size: 16px 14px;
          cursor: pointer;
          transform: rotate(360deg);
          transition: all ease 0.3s;
          &.up{
            transform: rotate(180deg);
            transition: all ease 0.3s;
          }
        }

        &.infrasType {
          position: relative;
        }
        ul{
          list-style: none;
          padding: 0;
          background: #191e30;
          //background:#4A8074;
          border: 2px solid #438eae;
          min-width: 115%;
          &.secondPop{
            margin-left: 255px;
            /*margin-top: -620px;*/
            /*height: 100px;*/
            overflow: scroll;
          }
          li{
            text-align: left;
            font-size: $font-mid;
            text-indent: 10px;
            line-height: 40px;
            cursor: pointer;
            border-top:2px solid transparent;
            border-bottom:2px solid transparent;
            overflow:hidden;
            text-overflow:ellipsis;
            white-space:nowrap;
            &:hover {
              color: #fff;
            }
            &.active,&:hover{
              background: #1f2b58;
             // background: #49beef;
              border-top:2px solid #438eae;
              border-bottom:2px solid #438eae;
              &:first-child{
                border-top:2px solid transparent;
              }
              &:last-child{
                border-bottom:2px solid transparent;
              }
            }
          }
        }

        &.searchInput{
          width: 280px;
          text-align: left;
          position: relative;
          margin-left: 10px;
          input{
            width: 230px;
            height: 40px;
            padding: 0 14px;
            border:none;
            box-sizing: border-box;
            background: transparent;
            color: #fff;
            font-size: $font-normal;
            outline: none;
          }
          .search-icon{
            width: 40px;
            height: 100%;
            position: absolute;
            top: 0;
            right: 0;

            background-size: 26px 26px;
            cursor: pointer;
            &.s-icon{
              background: url("../../../static/images/index/s-icon.png") no-repeat center;
            }
            &.c-icon{
              background: url("../../../static/images/index/clear-icon.png") no-repeat center;
            }
          }
        }

        &.searchContent{
          display: block;
          margin-top: 6px;
          width: 280px;
          margin-left: 193px;

        }
        .secondPop::-webkit-scrollbar {       /* 滚动条整体部分*/
          width: 3px;   /*纵向滚动条的宽度*/
          height: 0px;    /*横向滚动条的高*/
        }
        .secondPop::-webkit-scrollbar-track {  /*滚动条的轨道（里面装有Thumb）*/
          background-color:#405569;
          -webkit-border-radius: 2em;
          -moz-border-radius: 2em;
          border-radius:2em;
        }
        .secondPop::-webkit-scrollbar-thumb {  /*滚动条里面的小方块，能向上向下移动（或往左往右移动，取决于是垂直滚动条还是水平滚动条）*/
          background-color:#26a2d6;
          -webkit-border-radius: 2em;
          -moz-border-radius: 2em;
          border-radius:2em;
        }

      }
    }
</style>
